<template>
  <div>
    <br />
    <br />

    <el-table
      :cell-style="tableStyle"
      :data="questionList"
      style="width: 100%"
      :header-cell-style="{background:'#FAFAFA'}"
    >
      <el-table-column prop="id" label="编号" width="220"></el-table-column>
      <el-table-column prop="questionType" label="题型" width="80"></el-table-column>
      <el-table-column prop="questionId" label="题目编号" width="220"></el-table-column>
      <el-table-column prop="addTime" label="录入时间" width="180"></el-table-column>
      <el-table-column prop="integer" label="答题答案(s)"></el-table-column>
      <el-table-column prop="accuracyRate" label="正确率(%)"></el-table-column>
      <el-table-column prop="userName" label="录入人"></el-table-column>
      <el-table-column prop="operation" label="操作" width="80">
        <!-- 操作模块利用插槽 -->
        <template slot-scope="scope">
          <!-- 删除 -->
          <el-button
            title="删除"
            icon="el-icon-delete"
            type="danger"
            size="small "
            circle
            plain
            @click="$emit('delete',scope.row)"
          ></el-button>
        </template>
        <!--/ 操作模块利用插槽 -->
      </el-table-column>
    </el-table>

    <!-- 翻页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination"
      background
      layout="prev,pager,next,sizes,jumper"
      :total="pages*num"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="num"
    ></el-pagination>
  </div>
</template>

<script>
export default {

  props: {
    //这里是真数据，要求从父组件中传入，，下面用了模拟数据，    使用组件时自行解开注释
    // questionList: {
    //   type: Array,
    //   required: true
    // },

    //这里要求传的数据的总页码   ，下面用了模拟数据，  使用组件时自行解开注释
    // pages: {
    //   type: Number,
    //   required: true
    // }
  },

  data () {
    return {
      //这个是假数据，如果使用者再发送真数据到这个组件里时，发现有些数据显示不上，
      //说明该组件中的table内绑定的键名和真数据中的键名不一致，请自行修改组件中table上的键名
      questionList: [{
        id: 'w88202466622522290284',
        questionType: '多选',
        questionId: 'm11730363241718357279e45442640844198296887e36588639755314613776',
        addTime: '2021-10-28 11:21:12',
        integer: 1368,
        accuracyRate: 87,
        userName: '刘杰'
      },
      ],

      num: 5,
      pages: 2
    }
  },


  methods: {
    //设置table中单元格文字样式的函数
    tableStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 2) {
        return 'color : #0099FF'
      }
    },

    //当每页要求展示的数据的数量发生变化时，触发，出发后向父组件传递要获取数据的数量，默认依次5条数据
    handleSizeChange (val) {
      this.num = val
      this.$emit('sizeChange', val)
      // console.log(`每页 ${val} 条`);
    },

    //当页码改变时，触发，触发后传递当前时第几页
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`);
      this.$emit('CurrentChange', val)
    }
  }

}
</script>

<style scoped>
.fontColor {
  color: pink;
}
.pagination {
  float: right;
  margin-top: 20px;
  margin-bottom: 20px;
}

/deep/ .el-pagination__jump {
  margin-left: 0px;
}
</style>